<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
</div>


<script type="text/javascript">

  /*
  * 关于VueComponent
  *   1.school组件本质是一个VueComponent的构造函数,不是程序员定义的,是Vue.extend生成的
  *   2.我们只需写<school></school>,Vue解析时就会创建school组件的实例对象,
  *     即Vue帮我们执行:new VueComponent(options)
  *   3.特别注意:每次调用Vue.extend时,返回的都是一个全新的VueComponent构造函数
  *
  *   4.关于this的指向
  *     (1).组件配置中,data函数,methods中的函数,watch中的函数,computed中的函数,他们的this均是[VueComponent实例对象]
  *     (2).new Vue(options)配置中,它们的this均是[Vue实例对象]
  *
  *
  * */

  //第一步,创建组件
  const student = Vue.extend({
    template: `
      <div>
        <h2>学生姓名:{{ name }}</h2>
        <h2>学生年龄:{{ age }}</h2>
      </div>
    `,
    data() {
      return {
        name: '张三',
        age: '29'
      }
    }

  });

  const school = Vue.extend({
    template: `
      <div>
        <h2>学校名称:{{ name }}</h2>
        <h2>学校地址:{{ address }}</h2>
        <student></student>
      </div>
    `,
    data() {
      return {
        name: '二师',
        address: '高新二路'
      }
    },
    components: {student}
  })


  //第二步注册局部组件
  var vm = new Vue({
    el: '#root',
    template:`<school></school>`,
    components: {
      school
    }
  });

</script>
</body>
</html>
